<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:insert="~{include :: header('Job edit')}" />
  <th:block th:insert="~{include :: select2-css}" />
</head>
<body class="white-bg">

  <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-job-edit" th:object="${job}">
      <input name="jobId" th:field="*{jobId}" type="hidden" />
      <input name="version" th:field="*{version}" type="hidden" />
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">分组名称：</label>
        <div class="col-sm-9">
          <input name="group" th:field="*{group}" class="form-control" type="text" readonly required />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">Job名称：</label>
        <div class="col-sm-9">
          <input name="jobName" th:field="*{jobName}" class="form-control" type="text" autocomplete="off" required />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">Job状态：</label>
        <div class="col-sm-9">
          <select name="jobState" class="form-control m-b" th:with="enum=${@disjobService.enums('JobState')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{jobState}"></option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">Job类型：</label>
        <div class="col-sm-9">
          <select name="jobType" class="form-control m-b" th:with="enum=${@disjobService.enums('JobType')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{jobType}"></option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required" id="jobExecutorLabel">Job执行器：</label>
        <div class="col-sm-9">
          <textarea rows="3" name="jobExecutor" class="form-control" placeholder="支持：执行器类名、Spring bean name、DAG表达式、源码" required>[(*{jobExecutor})]</textarea>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Job参数：</label>
        <div class="col-sm-9">
          <textarea rows="3" name="jobParam" class="form-control">[(*{jobParam})]</textarea>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">重试配置：</label>
        <div class="col-sm-3">
          <select name="retryType" class="form-control m-b" th:with="enum=${@disjobService.enums('RetryType')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{retryType}"></option>
          </select>
        </div>
        <div class="col-sm-3">
          <input name="retryCount" placeholder="最大重试次数" class="form-control" th:field="*{retryCount}" type="text" autocomplete="off" />
        </div>
        <div class="col-sm-3">
          <input name="retryInterval" placeholder="重试间隔(毫秒)" th:field="*{retryInterval}" class="form-control" type="text" autocomplete="off" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Job有效期：</label>
        <div class="col-sm-9">
          <div class="input-daterange input-group">
            <input name="startTime" th:value="${#dates.format(job.startTime, 'yyyy-MM-dd HH:mm:ss')}" type="text" class="input-sm form-control" id="laydate-startTime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" />
            <span class="input-group-addon"> ~ </span>
            <input name="endTime" th:value="${#dates.format(job.endTime, 'yyyy-MM-dd HH:mm:ss')}" type="text" class="input-sm form-control" id="laydate-endTime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" />
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">触发器配置(<a href="http://cron.qqe2.com/" target="_blank">CronExpr</a>)：</label>
        <div class="col-sm-3">
          <select name="triggerType" class="form-control m-b" th:with="enum=${@disjobService.enums('TriggerType')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{triggerType}"></option>
          </select>
        </div>
        <div class="col-sm-6">
          <input name="triggerValue" th:field="*{triggerValue}" class="form-control" type="text" autocomplete="off" placeholder="触发器类型对应的值：Cron表达式、指定时间、固定频率、固定延时、父jobId等" required />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">执行超时时间(毫秒)：</label>
        <div class="col-sm-9">
          <input name="executeTimeout" class="form-control" th:field="*{executeTimeout}" type="text" placeholder="不填写或设置为0则表示无超时时间" autocomplete="off" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">执行冲突策略：</label>
        <div class="col-sm-9">
          <select name="collidedStrategy" class="form-control m-b" th:with="enum=${@disjobService.enums('CollidedStrategy')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{collidedStrategy}"></option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">过期策略：</label>
        <div class="col-sm-9">
          <select name="misfireStrategy" class="form-control m-b" th:with="enum=${@disjobService.enums('MisfireStrategy')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{misfireStrategy}"></option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">路由策略：</label>
        <div class="col-sm-9">
          <select name="routeStrategy" class="form-control m-b" th:with="enum=${@disjobService.enums('RouteStrategy')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{routeStrategy}"></option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label is-required">Worker关机的执行策略：</label>
        <div class="col-sm-9">
          <select name="shutdownStrategy" class="form-control m-b" th:with="enum=${@disjobService.enums('ShutdownStrategy')}">
            <option th:each="e : ${enum}" th:text="${e.desc}" th:value="${e.value}" th:field="*{shutdownStrategy}"></option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">告警选项：</label>
        <div class="col-sm-9">
          <input type="hidden" name="alertOptions" />
          <label class="check-box"><input type="checkbox" name="alertCheckbox" value="1" th:checked="${job.alertOptions==1 || job.alertOptions==3}" />异常警报</label>
          <label class="check-box"><input type="checkbox" name="alertCheckbox" value="2" th:checked="${job.alertOptions==2 || job.alertOptions==3}" />正常通知</label>
        </div>
      </div>
    </form>
  </div>

  <th:block th:insert="~{include :: footer}" />
  <th:block th:insert="~{include :: select2-js}" />

  <script th:inline="javascript">
    const prefix = ctx + "disjob/job";

    $(function () {
      layui.use('laydate', function () {
        let startDate = layui.laydate.render({
          elem: '#laydate-startTime',
          type: 'datetime',
          max: $('#laydate-endTime').val() || '2999-12-31 23:59:59',
          theme: 'molv',
          trigger: 'click',
          done: function (value, date) {
            // 结束时间大于开始时间
            if (value !== '') {
              endDate.config.min.year = date.year;
              endDate.config.min.month = date.month - 1;
              endDate.config.min.date = date.date;
            } else {
              endDate.config.min.year = '';
              endDate.config.min.month = '';
              endDate.config.min.date = '';
            }
          }
        });
        let endDate = layui.laydate.render({
          elem: '#laydate-endTime',
          type: 'datetime',
          min: $('#laydate-startTime').val() || '1900-01-01 00:00:00',
          theme: 'molv',
          trigger: 'click',
          done: function (value, date) {
            // 开始时间小于结束时间
            if (value !== '') {
              startDate.config.max.year = date.year;
              startDate.config.max.month = date.month - 1;
              startDate.config.max.date = date.date;
            } else {
              startDate.config.max.year = '';
              startDate.config.max.month = '';
              startDate.config.max.date = '';
            }
          }
        });
      });

      const retryType = $("select[name='retryType']");
      retryType.change(function () {
        const retryCount = $("input[name='retryCount']");
        const retryInterval = $("input[name='retryInterval']");
        if (this.value === "0") {
          retryCount.val("");
          retryInterval.val("");
          retryCount.hide();
          retryInterval.hide();
        } else {
          retryCount.show();
          retryInterval.show();
        }
      });
      retryType.trigger("change");

      const jobType = $("select[name='jobType']");
      const jobExecutor = $("textarea[name='jobExecutor']");
      const addViewDagLink = function () {
        const isDag = (jobExecutor.val() && jobType.val() === "2");
        $("#jobExecutorLabel").html(isDag ? '<a href="javascript:void(0)" onclick="viewDag()">Job执行器：</a>' : 'Job执行器：');
      };
      jobType.change(addViewDagLink);
      jobExecutor.blur(addViewDagLink);
      jobExecutor.trigger("blur");

    });

    $("#form-job-edit").validate({
      focusCleanup: true,
      rules: {
        retryCount: {
          digits: true,
          min: 0
        },
        retryInterval: {
          digits: true,
          min: 0
        },
        executeTimeout: {
          digits: true,
          min: 0
        }
      },
      messages: {
        executeTimeout: {
          digits: "请输入正数",
          min: "请输入正数"
        }
      }
    });

    function submitHandler() {
      if ($.validate.form()) {
        const alertAlarm  = $("input[name='alertCheckbox'][value='1']").prop('checked') ? 1 : 0;
        const alertNotice = $("input[name='alertCheckbox'][value='2']").prop('checked') ? 2 : 0;
        $("input[type='hidden'][name='alertOptions']").val(alertAlarm ^ alertNotice);
        $.operate.save(prefix + "/edit", $('#form-job-edit').serialize());
      }
    }

    function viewDag() {
      layer.photos({
        photos: {
          title: "DAG",
          data: [{
            alt: "original",
            src: prefix + "/dag?thumb=false&expr=" + encodeURIComponent($("textarea[name='jobExecutor']").val())
          },{
            alt: "thumbnail",
            src: prefix + "/dag?thumb=true&expr=" + encodeURIComponent($("textarea[name='jobExecutor']").val())
          }]
        },
        footer: false
      });
    }
  </script>

</body>
</html>
